// 1）搭建网站服务器，实现客户端与服务器端的通信
// 2）连接数据库，创建用户集合，向集合中插入文档
// 3）当用户访问/list时，将所有用户信息查询出来
//      实现路由功能
//      呈现用户列表页面
//      从数据库中查询用户信息 将用户信息展示在列表中
// 4）将用户信息和表格HTML进行拼接并将拼接结果响应回客户端
// 5）当用户访问/add时，呈现表单页面，并实现添加用户信息功能
// 6）当用户访问/modify时，呈现修改页面，并实现修改用户信息功能
//      增加页面路由 呈现页面
//          在点击修改按钮的时候 将用户ID传递到当前页面
//          从数据库中查询当前用户信息 将用户信息展示到页面中
//      实现用户修改功能
//          指定表单的提交地址以及请求方法
//          接收客户端传递过来的修改信息 找到用户 将用户信息更改为最新的
// 7）当用户访问/delete时，实现用户删除功能

const http = require('http');

const url = require('url');
const querystring = require('querystring');

require('./model/index');
const User = require('./model/user');

// User.create({
//     name: '吴方华',
//     age: 23,
//     password: '293033',
//     email: '503120676@qq.com',
//     hobbies: ['basketball', 'play LOL', 'swim']
// })

//创建服务器
const app = http.createServer();

//为服务器对象添加请求事件
app.on('request', async (req, res) => {
    //请求方式
    const method = req.method;
    //请求地址
    const { pathname, query } = url.parse(req.url, true);

    if (method == 'GET') {
        //呈现用户列表页面
        if (pathname == '/list') {
            let users = await User.find();
            console.log(users);
            let list = `<!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>用户列表</title>
                <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            </head>
            
            <body>
                <div class="container">
                    <h6>
                        <a href="/add" class="btn btn-primary">添加用户</a>
                    </h6>
                    <table class="table table-striped table-bordered">
                        <tr>
                            <td>用户名</td>
                            <td>年龄</td>
                            <td>爱好</td>
                            <td>邮箱</td>
                            <td>操作</td>
                        </tr>                                           
            `;

            //对数据进行循环操作
            users.forEach(item => {
                list += `
                        <tr>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>
                        `;

                item.hobbies.forEach(item => {
                    list += `<span>${item}</span>`;
                })

                list += `
                        </td>
                        <td>${item.email}</td>
                        <td>
                            <a href="/delete?id=${item._id}" class="btn btn-danger btn-xs">删除</a>
                            <a href="/modify?id=${item._id}" class="btn btn-success btn-xs">修改</a>
                        </td>
                        </tr>
                        `;
            })

            list += `
                    </table>
                </div>
            </body>       
            </html>
                `
            res.end(list);
        } else if (pathname == '/add') {
            let add = `<!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>用户列表</title>
                <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            </head>
            
            <body>
                <div class="container">
                    <h3>添加用户</h3>
                    <form method="post" action="/add">
                        <div class="form-group">
                            <label>用户名</label>
                            <input name="name" type="text" class="form-control" placeholder="请填写用户名">
                        </div>
                        <div class="from-group">
                            <label>密码</label>
                            <input name="password" type="password" class="form-control" placeholder="请输入密码">
                        </div>
                        <div class="from-group">
                            <label>年龄</label>
                            <input name="age" type="text" class="form-control" placeholder="请输入年龄">
                        </div>
                        <div class="from-group">
                            <label>邮箱</label>
                            <input name="email" type="text" class="form-control" placeholder="请填写邮箱">
                        </div>
                        <div class="form-group">
                            <label>请选择爱好</label>
                            <div>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="吃饭" name="hobbies"> 吃饭
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="睡觉" name="hobbies"> 睡觉
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="敲代码" name="hobbies"> 敲代码
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="洗" name="hobbies"> 洗
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="剪" name="hobbies"> 剪
                                </label>
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="吹" name="hobbies"> 吹
                                </label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">添加用户</button>
                    </form>
                </div>
            </body>
            
            </html>`
            res.end(add);
        } else if (pathname == '/modify') {
            let user = await User.findOne({ _id: query.id });
            let hobbies = ['吃饭', '睡觉', '敲代码', '洗', '剪', '吹'];
            let modify = `<!DOCTYPE html>
            <html lang="en">
            
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>用户列表</title>
                <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
            </head>
            
            <body>
                <div class="container">
                    <h3>修改用户</h3>
                    <form method="post" action="/modify?id=${user._id}">
                        <div class="form-group">
                            <label>用户名</label>
                            <input value="${user.name}" name="name" type="text" class="form-control" placeholder="请填写用户名">
                        </div>
                        <div class="from-group">
                            <label>密码</label>
                            <input value="${user.password}" name="password" type="password" class="form-control" placeholder="请输入密码">
                        </div>
                        <div class="from-group">
                            <label>年龄</label>
                            <input value="${user.age}" name="age" type="text" class="form-control" placeholder="请输入年龄">
                        </div>
                        <div class="from-group">
                            <label>邮箱</label>
                            <input value="${user.email}" name="email" type="text" class="form-control" placeholder="请填写邮箱">
                        </div>
                        <div class="form-group">
                            <label>请选择爱好</label>
                            <div>                             
                            `;
            hobbies.forEach(item => {
                let isHobby = user.hobbies.includes(item);
                if (isHobby) {
                    modify += `
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="${item}" name="hobbies" checked> ${item}
                                </label>`
                } else {
                    modify += `
                                <label class="checkbox-inline">
                                    <input type="checkbox" value="${item}" name="hobbies"> ${item}
                                </label>`
                }
            })
            modify += `
                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary">修改用户</button>
                            </form>
                        </div>
                    </body>
                    
                    </html>`;
            res.end(modify);
        } else if (pathname == '/delete') {
            await User.findOneAndDelete({ _id: query.id });
            res.writeHead(301, {
                Location: '/list'
            });
            res.end();
        }
    } else if (method == 'POST') {
        //用户添加功能
        if (pathname == '/add') {
            // 接收用户提交的信息
            let formData = '';
            // 接收POST参数
            req.on('data', param => {
                formData += param;
            })
            // POST参数接收完毕
            req.on('end', async () => {
                let user = querystring.parse(formData)
                // 将用户提交的信息添加到数据库中
                await User.create(user);
                // 301代表重定向
                // location跳转地址
                res.writeHead(301, {
                    Location: '/list'
                });
                res.end();
                //res.end('ok');
            })
        } else if (pathname == '/modify') {
            // 接收用户提交的信息
            let formData = '';
            // 接收POST参数
            req.on('data', param => {
                formData += param;
            })
            // POST参数接收完毕
            req.on('end', async () => {
                let user = querystring.parse(formData)
                console.log(user);
                // 修改数据库中用户信息
                await User.updateOne({ _id: query.id }, user);
                // 301代表重定向
                // location跳转地址
                res.writeHead(301, {
                    Location: '/list'
                });
                res.end();
                //res.end('ok');
            })
        }
    }
})

//监听端口
app.listen(3000);